<template>
  <div class="app-container">
    <!-- 条件框 -->
    <el-row :gutter="10">
        <el-col :span="4">
            <el-input @clear="search"  placeholder="请输入租户名" v-model="PageDto.name" clearable> </el-input>
        </el-col>
        <el-col :span="4">
            <el-input @clear="search"  placeholder="请输入租户key" v-model="PageDto.accessKey" clearable> </el-input>
        </el-col>
        <el-col :span="2">
            <el-button @click="PageDto.now=1;search()" type="primary" icon="el-icon-search">搜索</el-button>
        </el-col>
         <el-col :span="2">
            <el-button @click="clearSearch" type="danger" icon="el-icon-delete">清空</el-button>
        </el-col>
    </el-row>
    <!-- 表格数据 -->
    <el-table :data="List" style="width: 100%" max-height="550" stripe="">
      <el-table-column prop="name" label="租户名" align="center"/>
      <el-table-column prop="accessKey" label="租户key" align="center"/>
      <el-table-column prop="companyName" label="公司名称" align="center"/>
      <el-table-column prop="companyCode" label="执照编号" align="center"/>
      <el-table-column prop="phone" label="手机号" align="center"/>
      <el-table-column label="是否可用" align="center"> 
        <template slot-scope="scope">
          <span :class="scope.row.enable | enableClassFormat">
            {{ scope.row.enable |enableFormat }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述" align="center"/>
      <el-table-column  label="状态" align="center"> 
        <template slot-scope="scope">
          <span :class="scope.row.auditStatus | statusClassFormat">
            {{ scope.row.auditStatus |statusFormat }}
          </span>
        </template>
      </el-table-column>
      <el-table-column  label="操作" align="center"> 
        <template slot-scope="scope">
          <a @click.prevent="switchEnable(scope.row.id)" :class="scope.row.enable | operationClassFormat">
            {{ scope.row.enable |operationFormat }}
          </a>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="PageDto.now"
      layout="total,prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
//导入dept api
import { page,toggleEnable} from "@/api/tenant";
//导入pcd组件
// import PCD  from '../components/pcd.vue';
export default {
  components: {
    // // PCD:PCD
    // PCD
  },
  data() {
    return {
      List: [],
      PageDto: {
        now: 1,
        size: 10,
        name:"",
        accessKey:""
      },
      pages: 0,
      total: 0,
    };
  },
  methods: {
    handleCurrentChange(now) {
      this.PageDto.now = now;
      this.search();
    },
    search() {
      page(this.PageDto).then((res) => {        
        this.List = res.list;
        this.pages = res.pages;
        this.total = res.total;
      });
    },
    clearSearch(){
      this.PageDto.name = ""
      this.PageDto.accessKey = ""
      this.search()
    },
    switchEnable(tenantId){
      toggleEnable(tenantId).then(res=>{
        if(res.ok)
          this.search()
      })
    }
  },
  created() {
    this.search();
  },
  filters:{
    enableFormat(source){
      return source == 1?'可用':'不可用'
    },
    enableClassFormat(source){
      return source == 1?'enableStatus ant-tag1':'disableStatus ant-tag1'
    },
    statusFormat(source){
      let fStatus = '待审核'
      if(source == 1)
        fStatus = '通过'
      else if(source == 2)
        fStatus = '不通过'
      return fStatus
    },
    statusClassFormat(source){
      let fStatusClass = 'to-be-reviewed ant-tag1'
      if(source == 1)
      fStatusClass = 'enableStatus ant-tag1'
      else if(source == 2)
      fStatusClass = 'disableStatus ant-tag1'
      return fStatusClass
    },
    operationFormat(source){
      return source == 1?'禁用':'启用'
    },
    operationClassFormat(source){
      return source == 1?'red':'blue'
    }
  }
};
</script>

<style >
.enableStatus{
    background-color: rgb(135, 208, 104);
    color: #fff;
}
.disableStatus{
    background-color: rgb(255, 85, 0);
    color: #fff;
}
.to-be-reviewed{
  background-color: rgb(0, 174, 255);
    color: #fff;
}
.ant-tag1{
    box-sizing: border-box;
    margin: 0 8px 0 0;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum";
    display: inline-block;
    height: auto;
    padding: 0 7px;
    font-size: 12px;
    line-height: 20px;
    white-space: nowrap;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    opacity: 1;
    transition: all .3s;
}
.red{
  color:red;
  font-weight: bold;
}
.blue{
  color:blue;
  font-weight: bold;
}
</style>